

<template>
  <div class="app">
    <h2>App组件</h2>
    <div class="box">
      <div class="left">
        <ul>
          <li>
            <RouterLink to="/props" active-class="active" class="link">01_props</RouterLink>
          </li>
          <li>
            <RouterLink to="/custom" active-class="active" class="link">02_custom-event</RouterLink>
          </li>
          <li>
            <RouterLink to="/mitt" active-class="active" class="link">03_mitt</RouterLink>
          </li>
          <li>
            <RouterLink to="/model" active-class="active" class="link">04_v-model</RouterLink>
          </li>
          <li>
            <RouterLink to="/attr" active-class="active" class="link">05_$attr</RouterLink>
          </li>
          <li>
            <RouterLink to="/refs" active-class="active" class="link">06_$refs和$parent</RouterLink>
          </li>
          <li>
            <RouterLink to="/provide" active-class="active" class="link">07provide和inject</RouterLink>
          </li>
          <li>
            <RouterLink to="/slot" active-class="active" class="link">09_slot默认插槽</RouterLink>
          </li>
          <li>
            <RouterLink to="/slot2" active-class="active" class="link">09_slot具名插槽</RouterLink>
          </li>
          <li>
            <RouterLink to="/slot3" active-class="active" class="link">09_slot作用域插槽</RouterLink>
          </li>
        </ul>
      </div>
      <div class="right">
        <RouterView></RouterView>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts" name="App">

</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  padding: 20px;
}
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.left {
  flex: .3;
}
.right {
  flex: 1;
  background: skyblue;
}
.link {
  color: black;
}
.link.active {
  color: yellowgreen;
}
li {
  list-style: none;
  margin-bottom: 20px;
}
a {
  text-decoration: none;
}
</style>
